<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <!-- 导入CSS样式表 -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="login-container">
    <h1>用户登录</h1>
    <div class="form-group">
      <label for="userName">用户名：</label>
      <input name="userName" type="text" id="userName" autocomplete="username">
    </div>
    <div class="form-group">
      <label for="password">密码：</label>
      <input name="password" type="password" id="password" autocomplete="current-password">
    </div>
    <button class="login-btn" onclick="login()">登录</button>
  </div>

  <script src="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>
  <script>
    function login() {
      // 这里可以填写登录逻辑
      // 获取输入框的值
      var userName = $('#userName').val();
      var password = $('#password').val();
      // 简单校验
      if (!userName) {
        alert('请输入用户名');
        return;
      }
      if (!password) {
        alert('请输入密码');
        return;
      }
      // 发送GET请求到后端登录接口
      $.ajax({
        url: '/user/login', //后端接口为 /user/login
        type: 'GET',
        data: {
          //:号左边是后端接收的参数名，右边是前端传递的值
          userName: userName,
          password: password
        },
        success: function (res) {
          console.log(res);
          if (res) {
            //登陆成功
            alert('登录成功');
            // 可以跳转到显示用户名页面
            window.location.href = '/index.html';
          }else {
            //登陆失败
            alert('登录失败，请检查用户名或密码');
          }

        }
      });
    }
  </script>
</body>

</html>